<template>
  <div class="section-box">
    <FrameLayout>
      <template v-slot:left>
        <Frame title="预报" style="height: 100%" :menuName="'yubao'">
          <template v-slot:body>
            <WaterMonit />
          </template>
        </Frame>
      </template>
    </FrameLayout>

    <Dlgdiv v-if="this.$store.getters.dlgParams.name === 'RainInfo'" mask class="MeasuredDlgStyle">
      <template v-slot:title> 站点详情 </template>
      <template v-slot:body>
        <MeasuredDlg />
      </template>
    </Dlgdiv>
    <Dlgdivv v-if="this.$store.getters.dlgParams.name == 'FZCCuZINFO'" :title="false" mask class="DlgStyle">
      <template v-slot:title>详情</template>
      <template v-slot:body>
        <!-- <Dlgyyfxd :listStyleobj="ListStyleobj" :tablist="['5']" /> -->
        <Dlgyyfxd :listStyleobj="ListStyleobj" :tablist="['5']" />
      </template>
    </Dlgdivv>
    <!-- <Dlgdivv v-if="this.$store.getters.dlgParams.name=='FZCCuZINFO1'" :title="true" mask  class="DlgStyle">
      <template v-slot:title>雷达运行情况</template>
      <template v-slot:body>
        <div class="listTables ldtable">
          <el-table  ref="tableDataRef"  :data="tableData" border height="100%"  >
             <el-table-column
              v-for="(item, index) in columnDatas"
              :key="index"
              :prop = "item.field || ''"
              :label = "item.title"
              :min-width="item.columnWidth || 120"
              show-overflow-tooltip
              :align="item.align||'center'"
              ></el-table-column>

          </el-table>
        </div>
       
      </template>
    </Dlgdivv> -->

  </div>
</template>
<script>
import WaterMonit from './components/WaterMonit.vue'
import MeasuredDlg from '../../components/MeasuredDlg.vue'
export default {
  name: 'Risk',
  components: {
    WaterMonit,
    MeasuredDlg
  },
  data() {
    return {
      dlgName: '',
      dlgDate: null,
      poiType: 'water',
      isShowslot: 'DrainageAnalysis',
      waterTitleName: 'WaterFlow',
      ListStyleobj: {},
      columnDatas: [
        { 'field': 'stcd', 'title': '开机时间', 'columnWidth': '160', },
        { 'field': 'stcd', 'title': '正常运行时间', 'columnWidth': '160', },
        { 'field': 'stcd', 'title': '错误信息', 'columnWidth': '160', },
        { 'field': 'stcd', 'title': '关机时间', 'columnWidth': '160', },
      ],
      tableData: [],

    }
  },
  beforeDestroy() {
    this.$eventBus.$off('FZCINFO')
  },
  created() {
    this.$store.dispatch('rightFold', true);
  },
  methods: {
    change(e) {
      this.isShowslot = e
    },
    WaterTitleChange(e) {
      this.waterTitleName = e
    },
    onClickValue(val) {
      this.dlgName = val
      this.$store.dispatch('dlgShow', true)
    }

  }
}
</script>

<style lang="scss" scoped>
.MeasuredDlgStyle {
  width: 70% !important;
  height: auto !important;
  left: 15%;
  top: 0%
}

.DlgStyle {
  width: 70% !important;
  height: 85% !important;
  left: 15%;
  top: 0%
}

.section-box {
  position: relative;
  width: 100%;
  height: 100%;
}

.todayscope .scope {
  padding-left: 10px;
}

.scope {
  position: relative;
  height: 100%;
}

.timeChange:nth-child(2) {
  margin: -39px 30px 0 30px;
}

.mt.timeChange {
  margin-top: -39px;
}

.timeChange {
  //min-width: 140px;
  height: 100%;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
}

.active {
  background: url("~@/assets/img/fireTable.png") no-repeat;
  background-size: 100% 100%;
}

::v-deep .el-dialog__wrapper .el-dialog {
  height: 80%;
}

.translate {
  transition: all 0.4s;
}

.rightImg {
  width: 77px;
  height: 26px;
  opacity: 1;
  cursor: pointer;

  img {
    width: 100%;
    height: 100%;
  }
}

.ldtable {
  height: 98%;
}
</style>
